<script setup lang="ts">
import { CodeInfo } from '@/assets/api/rtdatasubscriberservice_0_0_1';
import * as rtdataSubscriberService from '@/assets/api/rtdatasubscriberservice_0_0_1';
import { ElMessage, ElSelect, ElOption } from 'element-plus';
import { onMounted, onUnmounted, reactive } from 'vue';

const emit = defineEmits<{
  (e: 'select', codeInfo: CodeInfo): void;
}>();

const data = reactive({
  show: true,
  keyword: '',
  searching: true,
  codeList: [] as CodeInfo[],
  selectedIndex: 0,
  filter1: '', // 添加第一个筛选框的数据绑定
  filter2: '', // 添加第二个筛选框的数据绑定
  filterOptions1: [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' },
    { label: '选项3', value: 'option3' },
  ], // 第一个筛选框的选项
  filterOptions2: [
    { label: '选项A', value: 'optionA' },
    { label: '选项B', value: 'optionB' },
    { label: '选项C', value: 'optionC' },
  ], // 第二个筛选框的选项
});

const searchCode = async () => {
  if (!data.keyword.trim()) return;

  data.searching = true;
  try {
    // 假设这是一个API调用来搜索数据
    const results = await rtdataSubscriberService.searchCodes(data.keyword);
    data.codeList = results || [];
  } catch (err) {
    ElMessage.error('搜索失败');
  } finally {
    data.searching = false;
  }
};

const onSelect = (index: number) => {
  emit('select', data.codeList[index]);
  setTimeout(escKeyboardElf, 200); // 延迟隐藏键盘
};

// 退出/隐藏键盘精灵
const escKeyboardElf = () => {
  Object.assign(data, {
    keyword: '',
    show: false,
    searching: true,
    codeList: [],
    selectedIndex: 0,
    filter1: '', // 重置第一个筛选框的数据
    filter2: '', // 重置第二个筛选框的数据
  });
};

const onKeyDown = (e: KeyboardEvent) => {
  if (e.ctrlKey) return;

  switch (e.key) {
    case 'Escape':
      if (data.show) escKeyboardElf();
      break;
    case 'Backspace':
      if (data.keyword) {
        data.keyword = data.keyword.slice(0, -1);
        if (!data.keyword) escKeyboardElf();
        else searchCode();
      }
      break;
    case 'ArrowUp':
      if (data.selectedIndex > 0) data.selectedIndex--;
      break;
    case 'ArrowDown':
      if (data.selectedIndex < data.codeList.length - 1) data.selectedIndex++;
      break;
    case 'Enter':
      onSelect(data.selectedIndex);
      break;
    default:
      if (/^[A-Za-z0-9]$/.test(e.key) && !data.searching) {
        data.show = true;
        data.keyword += e.key;
        searchCode();
      }
      break;
  }

  e.preventDefault();
};

onMounted(() => {
  document.addEventListener('keydown', onKeyDown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', onKeyDown);
});
</script>

<template>
  <div class="keyboard-elf" v-show="data.show">
    <h3>
      DQT 键盘精灵 <span class="tip">按 ESC 退出</span>
    </h3>
    <el-input
      v-model="data.keyword"
      placeholder="键盘精灵"
      style="width: 100%;"
    />

    <!-- 添加两个筛选按钮和一个搜索框 -->
    <div class="filters">
      <el-select v-model="data.filter1" placeholder="筛选条件1">
        <el-option
          v-for="option in data.filterOptions1"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        ></el-option>
      </el-select>
      <el-select v-model="data.filter2" placeholder="筛选条件2">
        <el-option
          v-for="option in data.filterOptions2"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        ></el-option>
      </el-select>
      <el-button @click="searchCode">搜索</el-button>
    </div>

    <div class="results" id="keyboardElf-result-list">
      <p v-if="data.searching" class="tip">搜索中...</p>
      <div v-else>
        <p v-if="!data.codeList.length" class="tip">无搜索结果</p>
        <el-row
          v-for="(item, i) in data.codeList"
          :key="i"
          :class="{ selected: i === data.selectedIndex }"
          @click="onSelect(i)"
          :title="item.name"
        >
          <el-col :span="12" class="name">{{ item.name }}</el-col>
          <el-col :span="12" class="symbol">{{ item.code }}</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.keyboard-elf {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  padding: 0 10px;
  background-color: #a6d9f1;
  z-index: 9;
  box-shadow: 1px 2px 20px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

  h3 {
    line-height: initial;
    margin: 10px 0;
    .tip {
      float: right;
      font-size: 12px;
      color: rgb(248, 98, 98);
    }
  }

  .filters {
    margin: 10px 0;

    .el-select {
      width: 100%;
      margin-bottom: 10px;
    }
  }

  .results {
    height: 300px;
    margin: 10px 0;
    overflow-y: auto;

    .tip {
      color:rgb(165, 143, 242);
      text-align: center;
      margin-top: 100px;
    }

    > p {
      padding: 0 10px;
    }

    .el-row {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-right: 2px;
      border-radius: 3px;
      font-size: 12px;

      &:hover {
        background-color: #677be1;
        color: rgb(165, 143, 242);
        cursor: pointer;
      }

      .name {
        overflow: hidden;
        width: 134px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .el-row.selected {
      background-color: #3e4fa7;
      color:rgb(165, 143, 242);
    }
  }
}
</style>
